<template>
  <div class="dataUSA">
    <div class="left">
      <happy-scroll color="rgba(6,6,13,0.3)" size="10" resize>
        <div class="cont" style="padding-right:15px">
          <el-table ref="multipleTable" :data="navMenus" :show-header="showHeader" fit highlight-current-row @row-click="rowclick" :row-class-name="tableRowClassName">
            <el-table-column prop="organization" fixed="left" width="290" align="center"> </el-table-column>
          </el-table>
        </div>
      </happy-scroll>
    </div>
    <div class="right">
      <el-table :data="tableData" :header-cell-style="{background: 'rgba(118,201,241,0.10)',color: 'rgba(1,0,0,0.65)'}" style="float:right">
          <el-table-column prop="" label="序号" width="80" align="center">
            <template slot-scope="scope">
              <span>{{(page - 1) * perPage + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="dataAddress1" label="数据地址" width="260" align="center"> </el-table-column>
          <el-table-column prop="websiteName" label="网站名称" align="center"> </el-table-column>
          <el-table-column prop="dataType" label="数据类型"  align="center"> </el-table-column>
          <el-table-column prop="title" label="标题" align="center"> </el-table-column>
          <el-table-column prop="author" label="作者" align="center"> </el-table-column>
          <el-table-column prop="text1" label="正文" width="280" align="center"> </el-table-column>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                  <el-button @click="checkClick1(scope.$index,scope.row)" type="text" size="small">查看</el-button>
              </template>
          </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import { HappyScroll } from 'vue-happy-scroll'
  import 'vue-happy-scroll/docs/happy-scroll.css'
  export default {
    name: 'tableData',
    props: ['tableData'],
    data() {
      return {
        navMenus: [],
        activeIndex: this.$route.path,
        showHeader: false,
        page:1,
        perPage:10
      };
    },
    components: {
      'happy-scroll': HappyScroll
    },
    methods: {
      getLeftData() {
        this.$api.dataManage.defenseSearch().then(res => {
          // console.log('999999999999999999996666666666666');
          console.log(res);
          this.navMenus = res.data
        })
      },
      rowclick(row) {
        console.log(row);
        // 向父组件传值
        this.$emit('getChild', row.organization);
      },
       tableRowClassName({row, rowIndex}) {
        return 'success-row';
      }
    },
    mounted(){
        this.getLeftData()
        // this.$refs.multipleTable.toggleRowSelection(this.navMenus[0]);
        this.$refs.multipleTable.toggleRowSelection(this.navMenus[2],true);
    },
  }   
</script>

<style>
.dataUSA {
    height: 750px;
    background-color: rgb(255, 255, 255);
}

.dataUSA .left {
  height: 750px;
  width: 15%;
  /* background-color: #E4E7ED; */
  display: inline-block;
}

.dataUSA .right {
  height: 750px;
  width: 84%;
  background-color: rgb(64, 44, 241);
  display: inline-block;
}

.left .el-table .success-row {
    background: #ebebeb;
  }
</style>

<!-- <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" background-color="#E4E7ED" router @select="selNavClick">
              <template v-for="navMenu in navMenus">
                <el-menu-item :key="navMenu.defenceId" :data="navMenu" :index="navMenu.organization" >
                  <span slot="title">{{navMenu.organization}}</span>
                </el-menu-item>
              </template>
          </el-menu> -->